<template>
  <!-- 后台管理左侧导航栏 -->
  <el-menu
    :default-active="activeIndex"
    class="nav-menu"
    :collapse="isCollapse"
    background-color="#fff"
    text-color="#333"
    active-text-color="#409EFF"
    @select="handleSelect"
  >
    <!-- 使用循环渲染菜单项 -->
    <template v-for="item in menuItems">
      <!-- 普通菜单项 -->
      <el-menu-item
        v-if="!item.children"
        :index="item.index"
        :class="{ 'active-menu': selectedIndex === item.index }"
      >
        <i class="iconfont" :class="item.icon"></i>
        <span slot="title" style="padding-left: 5px">{{ item.title }}</span>
      </el-menu-item>

      <!-- 带子菜单的菜单项 -->
      <el-submenu v-else :index="item.index">
        <template slot="title">
          <i class="iconfont" :class="item.icon"></i>
          <span style="padding-left: 5px">{{ item.title }}</span>
        </template>
        <el-menu-item
          v-for="subItem in item.children"
          :key="subItem.index"
          :index="subItem.index"
          :class="{ 'active-menu': selectedIndex === subItem.index }"
        >
          <div class="submenu-item">
            <div :class="{ line: selectedIndex === subItem.index }"></div>
            <span class="submenu-item-title">
              {{ subItem.title }}
            </span>
          </div>
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
export default {
  name: "CustomSidebarNav",
  props: {
    // 从父组件接收当前活动的菜单索引
    activeIndex: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      selectedIndex: this.activeIndex,
      isCollapse: false, // 控制菜单是否折叠
      // 菜单数据，使用数组统一管理
      menuItems: [
        {
          index: "1",
          title: "首页",
          icon: "icon-shouye",
          componentName: "home",
        },
        {
          index: "2",
          title: "模板",
          icon: "icon-a-moban2",
          componentName: "templateIndex",
        },
        {
          index: "3",
          title: "模块",
          icon: "icon-mokuaiyingyong",
          componentName: "moduleIndex",
        },
        {
          index: "4",
          title: "轮播",
          icon: "icon-lunbo-03",
          componentName: "carouselIndex",
        },
        {
          index: "5",
          title: "文章管理",
          icon: "icon-fabudankuang-tuiwen",
          componentName: "articleIndex",
          children: [
            {
              index: "5-2",
              title: "新建文章",
              icon: "",
              componentName: "articleTemplateIndex",
            },
            {
              index: "5-1",
              title: "文章列表",
              icon: "",
              componentName: "articleListIndex",
            },
          ],
        },
        {
          index: "6",
          title: "AI",
          icon: "icon-ait",
          componentName: "aiIndex",
        },
        {
          index: "7",
          title: "公众号管理",
          icon: "icon-gongzhonghaoguanli",
          children: [
            {
              index: "7-1",
              title: "基本信息",
              icon: "",
              componentName: "wechatBasicInfoIndex",
            },
            {
              index: "7-2",
              title: "用户管理",
              icon: "",
              componentName: "wechatUserInfoIndex",
            },
            {
              index: "7-3",
              title: "自动回复",
              icon: "",
              componentName: "wechatAutoReplyIndex",
            },
            {
              index: "7-4",
              title: "用户留言",
              icon: "",
              componentName: "wechatUserMessageIndex",
            },
            // {
            //   index: "7-5",
            //   title: "自动回复",
            //   icon:"",
            //   componentName: "wechatAutoReply",
            // },
          ],
        },
        {
          index: "8",
          title: "商城管理",
          icon: "icon-shangchengguanli",
          children: [
            {
              index: "8-1",
              title: "商品列表",
              icon: "",
              componentName: "productListIndex",
            },
            {
              index: "8-2",
              title: "客户信息",
              icon: "",
              componentName: "customerInfoIndex",
            },
          ],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    // 处理菜单选择事件
    handleSelect(key, keyPath) {
      const newKey = keyPath.length > 1 ? keyPath[1] : key;
      const obj = this.$utils.findAndMergeMenuItem(this.menuItems, newKey);
      console.log("打印工具函数", obj);
      this.selectedIndex = obj.index;
      // 将选中的菜单索引通过事件传递给父组件
      this.$emit("menu-select", obj);
    },
  },
};
</script>

<style scoped>
.nav-menu {
  padding-top: 15px;
  width: 200px; /* 菜单宽度，可根据实际调整 */
  height: calc(100vh - 27px); /* 高度占满视口 */
  overflow-y: auto; /* 内容过长时可以垂直滚动 */
  border-right: none; /* 去掉右侧边框 */
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  z-index: 99;
  box-shadow: 0px 10px 14px 0px rgba(0, 0, 0, 0.3) !important;
}
/* 隐藏Webkit浏览器的滚动条 */
.nav-menu::-webkit-scrollbar {
  display: none;
}
/* 覆盖原有左侧导航栏的宽度 */
.el-menu,
.el-menu .el-menu-item {
  width: 170px !important;
  min-width: 170px !important;
}
/* 覆盖原有下拉菜单箭头的颜色 */
::v-deep.el-menu .el-submenu__title .el-icon-arrow-down:before {
  color: #348cf8 !important;
}
/* 选中项的背景色和样式 */
.active-menu {
  background-color: #e6f7ff !important; /* 选中项背景色 */
}
/* 确保子菜单项也有正确的样式 */
::v-deep .el-menu-item.is-active {
  background-color: #e6f7ff !important;
}
.submenu-item {
  border-left: 2px solid #d1d0d0;
  margin-left: -10px;
  position: relative;
}
.line {
  position: absolute;
  top: 18px;
  left: -2px;
  width: 3px;
  height: 15px;
  background-color: #348cf8;
}
.submenu-item-title {
  padding-left: 16px;
}
</style>
